<template>
  <div class="personbar">
    <div class="tipinfo" v-show="isTip">{{tipword}}</div>
    <div class="container">
      <div class="editarea">
        <!--<div class="avatar"><img :src='avatarimg'/></div>-->
        <div class="avatar">
          <div  @change="changeImage($event)">
            <input type="file" class="input-file" ref="avatarInput" accept="image/jpeg,image/jpg,image/png">
            <img :src="avatarimg?avatarimg:require('../assets/images/avatar-default.png')"  name="avatarimg" >
          </div>
        </div>
          <div class="aa">
            <div class="a1">{{username}}
              <span  @click="changeName" v-show="!isChange" class="editname">修改</span>
              <!--<span style="font-size: 14px;color: #2D65A2;" @click="changeName" v-show="!isChange" class="hand">修改</span>-->
            </div>
            <div class="a2" v-show="!isChange">普通用户</div>
          </div>
          <div class="bb">
            <div class="b2 hand" @click="goRecharge">立即充值</div>
          </div>
          <div class="cc" v-show="isChange">
            <div class="c1"><input type="text" v-model="nickname" class="inputtext"></div>
            <div class="c2">
              <div class="btn1 hand" @click="saveChange">保存</div>
              <div class="btn2 hand" @click="noChange">取消</div>
            </div>
          </div>

      </div>
    </div>
  </div>
</template>
<script>
  import axios  from 'axios'
  import qs from 'qs'
  export default {
    data: () => ({
         avatarimg:'/avatar-default.png',
         username:"",
         isChange:false,
         user:'',
         nickname:'',
         tipword:'',
      // 提示
         isTip:false,
         tipword:'',
         poster:''
  }),mounted(){
     this.user=JSON.parse(localStorage.getItem("user"));
      if(this.user!=null && this.user!="" && this.user!=undefined){
        this.username=this.user.nick_name;
        this.avatarimg=this.user.poster;
        this.nickname=this.username;
        this.poster=this.user.poster;


        console.log(this.username+" "+this.nickname);
      }else{
        this.$router.push({path: '/'});

      }
      //this.getSessionUser();

    },
    methods:{
      getSessionUser(){

        let key=localStorage.getItem("user_unique_code");
        if(key!=null && key!="" && key!=undefined){
          console.log("key "+key)
          axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
          )
            .then((response)=>{
              console.log("resultuser "+response.data);
              let result= response.data;
              if(result.code==1){
                console.log(result.data.trim())
                this.user=JSON.parse(result.data.trim());
                console.info("usermsg "+this.user)
                if(this.user!=null && this.user!="" && this.user!=undefined){
                  this.username=this.user.nick_name;
                  this.avatarimg=this.user.poster;
                  this.nickname=this.username;
                  this.poster=this.user.poster;


                  console.log(this.username+" "+this.nickname);
                }else{
                  this.$router.push({path: '/'});

                }
              }else{//用户过期了，需要重新获取用户信息保存
                axios.post('https://wenku.qikan.com:11000/admin/lib/getUserByUniqueCode.html',qs.stringify({'unique_code':key})
                )
                  .then((response)=>{
                    console.log(response.data);
                    let result= response.data;
                    if(result.code==1){//获取用户信息成功
                      localStorage.removeItem("user_unique_code");
                      localStorage.setItem("user_unique_code",result.data.unique_code);
                      this.user =result.data;
                      let v=JSON.stringify(this.user);
                      console.log(this.user)
                      axios.post('https://wenku.qikan.com:11000/admin/lib/removeTokenByUserId.html',qs.stringify({'key':result.data.unique_code}))
                        .then(function(res){

                          console.log(res.data.data);
                        })
                      axios.post('https://wenku.qikan.com:11000/admin/lib/setTokenByUserId.html',qs.stringify({'key':result.data.unique_code,'value':v}))
                        .then(function(res){
                          console.log(res.data.data);
                        })
                      if(this.user!=null && this.user!="" && this.user!=undefined){
                        this.username=this.user.nick_name;
                        this.avatarimg=this.user.poster;
                        this.nickname=this.username;
                        this.poster=this.user.poster;
                      }else{
                        this.$router.push({path: '/'});
                      }
                    }else{
                      this.$router.push({path: '/'});
                    }
                  })
                  .catch((error)=>{
                    console.log(error)
                  })

                this.$router.push({path: '/'});
              }
            })
            .catch((error)=>{
              console.log(error)
            })
        }else{
          this.$router.push({path: '/'});
        }


      },
    changName(){
     this.isChange=true;
    },changeName(){
        this.isChange=true;
      },changeImage: function(e){
        let file = e.target.files[0];
        if (file.size > 1 * 1024 * 1024) {
          this.tipshow("单张图片最大1M，请重新选择")
          return
        }
        if(file) {
          this.file = file
          console.log(this.file)
          let reader = new FileReader()
          let that = this
          reader.readAsDataURL(file)
          reader.onload= function(e){
            // 这里的this 指向reader
            that.avatarimg = this.result
            console.log("userssss  "+that.user.mobile)
            axios.post('https://wenku.qikan.com:11000/admin/lib/editMsg.html',qs.stringify({'editType':500,'mobile':that.user.mobile,'avatarimg':that.avatarimg})
            )
              .then((response)=>{
                console.log(response.data);
                let result= response.data;
                if(result.code==1){
                  that.tipshow("修改成功！");
                  that.setData(result.data);
                  that.noChange();
                }else{
                  that.tipshow(result.message)
                }
              })
              .catch((error)=>{
                console.log(error)
              })

          }
        }
      },
    saveChange(){
      if(this.nickname){
        axios.post('https://wenku.qikan.com:11000/admin/lib/editMsg.html',qs.stringify({'editType':300,'mobile':this.user.mobile,'nick_name':this.nickname})
        )
          .then((response)=>{
            console.log(response.data);
            let result= response.data;
            if(result.code==1){
              this.tipshow("修改成功！");
              this.setData(result.data);
              this.noChange();
            }else{
              this.tipshow(result.message)
            }
          })
          .catch((error)=>{
            console.log(error)
          })
      }else{
        alert("用户名不能为空！");
      }
    },
    noChange(){
     this.isChange=false;
    },tipshow(e){
        this.tipword=e;
        this.isTip=true;
        setTimeout(() => {
          this.tipword='';
          this.isTip=false;
        }, 2000);
      },
    goRecharge(){
      window.location.href="/person/recharge";
      //this.$router.push("/person/recharge");
    },setData(data){
        // localStorage.removeItem("user");
        // localStorage.setItem("user", JSON.stringify(data));
        this.user =data
        let v=JSON.stringify(this.user);
        console.log(this.user)

       // this.getSessionUser()
          //JSON.parse(localStorage.getItem("user"));
        this.username=this.user.nick_name;
        this.avatarimg=this.user.poster;
        this.nickname=this.username;
        this.poster=this.user.poster;

      }

    },
  }

</script>
<style scoped>
.container{ background: url('../assets/images/person-banner.png') left top no-repeat; background-size: 1140px 246px; width:1140px;height: 246px; margin:20px auto 0;overflow: hidden; padding: 0;}
.editarea{ width: 100%; height: 54px; margin: 162px 0 30px; padding-left:218px; padding-right: 34px; position: relative;}
/*.avatar{ width: 162px; height: 162px; border: 0px solid #fff; position: absolute;z-index: 2; left:24px; bottom:24px;}*/
/*.avatar img{ width: 160px; height: 160px; display: block; }*/
.avatar{ width: 162px; height: 162px;  position: absolute;z-index: 2; left:24px; bottom:24px;}
.avatar img{ width: 160px; height: 160px; display: block; border-radius:10px; overflow: hidden; }
.input-file {position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer; width: 100%;  height: 100%;}

.inputtext{ width: 394px; height: 28px; background-color: #f6f6f6; outline: none; border: none;padding-left: 10px; ; }

.aa{width:400px; height: 54px; float: left; }
/*.a1{ width:400px; height: 30px; line-height: 30px; font-size: 22px; color: #1a1a1a; }*/
.a1{ width:400px; height: 30px; line-height: 30px; font-size: 22px; color: #1a1a1a; font-weight: 600; }
.a2{ width: 400px; height: 24px; font-size: 14px; color: #8590A6;   }

.bb{width:400px; height: 54px; float: right; text-align: right; line-height: 54px;}
.b2{ width: 120px; height: 34px; float: right; font-size: 14px; color: #fff; background: #0084FF;border-radius: 3px;text-align: center; line-height: 34px; vertical-align: middle;  }

.cc{ width:394px; height: 66px; position: absolute ; z-index: 2; left: 300px; bottom:-11px; background: #fff;}
.c1{width: 394px; height: 28px;}
.c2{width: 100%; height: 27px; margin-top: 11px; }
.c2 .btn1{width: 55px; height: 27px;font-size: 12px;color: #fff;text-align: center; line-height: 27px;background: #0084FF;border-radius: 2px;display: inline-block;}
.c2 .btn2{width: 55px; height: 27px;font-size: 12px;color: #8B96A9;text-align: center; line-height: 27px;border-radius: 2px;border: 1px solid #8590A6;margin-left:14px; display: inline-block;}
.tipinfo{position: fixed; z-index: 9999; top: 50%; left: 50%; width: 400px;  height: 40px;border-radius: 10px; margin-left: -200px; margin-top: -20px; line-height: 40px;text-align: center;color: #fff; font-size: 14px; background-color: rgba(50,50,50,0.8)}
.editname{font-size: 14px;color: #2D65A2; background: url('../assets/images/icon-edit.png') left center no-repeat; background-size: 11px 11px; display: inline-block;padding-left: 15px; margin-left:10px; cursor:pointer;}
</style>
